<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>物料管理</title>  
    <link rel="stylesheet" href="css/pintuer.css">
    <link rel="stylesheet" href="css/admin.css">
    <script src="js/jquery.js"></script>
    <script src="js/pintuer.js"></script>
    <link rel="styLesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
</head>
<body>
<button type="button" id="addBtn" class="layui-btn">新增</button>
	<table id="layuitable" lay-filter="layuitable"></table>
</body>
<!-- 新增 -->
<div id="addDiv" style="display:none">
	<form class="layui-form" id="myaddform" lay-filter="myaddform" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">名称</label>
    <div class="layui-input-block">
      <input type="text" name="name"  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">数量</label>
    <div class="layui-input-block">
      <input type="text" name="number" lay-verify="required" placeholder="请输入数量" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">材质</label>
    <div class="layui-input-block">
      <input type="text" id="createDate"  name="science" lay-verify="required" placeholder="请输入材质" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">来源</label>
    <div class="layui-input-block">
      <input type="text" name="sourc"  lay-verify="required" placeholder="请输入来源" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">进价</label>
    <div class="layui-input-block">
      <input type="text" name="pprice"  lay-verify="required" placeholder="请输入进价" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">售价</label>
    <div class="layui-input-block">
      <input type="text" name="price"  lay-verify="required" placeholder="请输入售价" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">负责人</label>
    <div class="layui-input-block">
      <input type="text" name="personincharge"  lay-verify="required" placeholder="请输入负责人" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="myaddform">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</div>
<!-- 修改 -->
<div id="updateDiv" style="display:none">
	<form class="layui-form" id="myupdateform" lay-filter="myupdateform"" action="">
	<input name="id" type="hidden">
  <div class="layui-form-item">
    <label class="layui-form-label">名称</label>
    <div class="layui-input-block">
      <input type="text" name="name"  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">数量</label>
    <div class="layui-input-block">
      <input type="text" name="number" lay-verify="required" placeholder="请输入数量" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">材质</label>
    <div class="layui-input-block">
      <input type="text"  name="science" lay-verify="required" placeholder="请输入材质" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">来源</label>
    <div class="layui-input-block">
      <input type="text" name="sourc"  lay-verify="required" placeholder="请输入来源" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">进价</label>
    <div class="layui-input-block">
      <input type="text" name="pprice"  lay-verify="required" placeholder="请输入进价" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">售价</label>
    <div class="layui-input-block">
      <input type="text" name="price"  lay-verify="required" placeholder="请输入售价" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">负责人</label>
    <div class="layui-input-block">
      <input type="text" name="personincharge"  lay-verify="required" placeholder="请输入负责人" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="myupdateform">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</div>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script type="text/javascript">
	layui.use(['table','layer','laydate','form'],function(){
		var table = layui.table;//获取这个table这个组件的工具
		var layer = layui.layer;//获取这个table这个组件的工具
		var laydate = layui.laydate;//获取这个table这个组件的工具
		var form = layui.form;//获取这个table这个组件的工具
		var openIndex;
		table.render({
			elem:'#layuitable',//元素
			height:500,
			url:'${pageContext.request.contextPath}/MeterielServlet',
			page:true,//分页栏
			cols:[[
				{field:'id',title:'id',width:'50',sort:true,fixed:'left'},
				{field:'name',title:'名称',width:'150'},
				{field:'number',title:'数量',width:'100'},
				{field:'science',title:'材料',width:'220'},
				{field:'sourc',title:'来源',width:'100'},
				{field:'pprice',title:'进价',width:'120'},
				{field:'price',title:'售价',width:'120'},
				{field:'personincharge',title:'负责人',width:'120'},
				{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
			]]
		});//渲染,初始化
		
		//弹出新增界面
		$("#addBtn").click(function(){
			openIndex=layer.open({
				type:1,
				title:'新增页面',
				area:['380px','90%'],
				content:$("#addDiv")
			});
		});
		//绑定myaddform的submit事件
		
		form.on('submit(myaddform)',function(){
			//form表单取值
			var myformdata=form.val('myaddform');
			$.ajax({
				url:'${pageContext.request.contextPath}/MeterielServlet?action=add',
				data:myformdata,
				type:'post',
				dataType:'json',
				success:function(data){
					if(data.code==0){
						table.reload('layuitable');
						layer.close(openIndex);
					}
					layer.msg(data.msg);
				}
			});
			//阻止提交
			return false;
		});
		form.on('submit(myupdateform)',function(){
			//form表单取值
			var myformdata=form.val('myupdateform');
			$.ajax({
				url:'${pageContext.request.contextPath}/MeterielServlet?action=update',
				data:myformdata,
				type:'post',
				dataType:'json',
				success:function(data){
					if(data.code==0){
						table.reload('layuitable');
						layer.close(openIndex);
					}
					layer.msg(data.msg);
				}
			});
			//阻止提交
			return false;
		});
		//绑定行工具事件 坚挺的是layuitable的工具条
		table.on('tool(layuitable)',function(obj){
			if(obj.event=='edit'){
				openIndex=layer.open({
					type:1,
					title:'修改页面',
					area:['380px','90%'],
					content:$("#updateDiv")
				});
				//根据id从后端获取最新最全的数据
				$.ajax({
					url:'${pageContext.request.contextPath}/MeterielServlet?action=getNewsById',
					data:{
						'id':obj.data.id
					},
					type:'post',
					dataType:'json',
					success:function(data){
						if(data.code==0){
							//给update表单赋值
							form.val('myupdateform',data.data);
							console.log(data.msg);
						}else{
							
							console.log(data.msg);
						}
					}
				});
				
			}
			if(obj.event=='del'){
				layer.msg("你确定要删除吗?",{
					time:0,
					btn:['确定','取消'],
					yes:function(index){
						$.ajax({
							url:'${pageContext.request.contextPath}/MeterielServlet?action=delete',
							data:{
								'id':obj.data.id
							},
							type:'post',
							dataType:'json',
							success:function(data){
								if(data.code==0){
									table.reload('layuitable');
									layer.close(openIndex);
								}
								layer.msg(data.msg);
							}
						});
					}
				});
			}
			console.log(obj);
		});
	});
</script>
</html>